<template>
  <el-dialog v-model="visible" title="地址坐标选取">
    <div class="mb-20px flex flex-row justify-between">
      <el-autocomplete
        v-model="keyword"
        placeholder="请输入地址"
        :fetch-suggestions="querySearchAsync"
        value-key="name"
        @select="handleSelect"
        :trigger-on-focus="false"
        :debounce="1000"
        clearable
      >
        <template #default="{ item }">
          <div>
            {{ item.name }}
          </div>
          <div v-if="typeof item.address === 'string'">{{ item.address }}</div>
        </template>
      </el-autocomplete>
      <div class="flex flex-col justify-center">
        <div>
          <span>经度:{{ selectLocation[0] }}</span>
          <span class="ml-10px">纬度:{{ selectLocation[1] }}</span>
        </div>
      </div>
    </div>
    <Map ref="MapRef" @get-map="getMap" :zoom="14" @get-location="getLocation"></Map>
    <template #footer>
      <el-button>取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { tips } from "@/api/modules/map";
import { ref } from "vue";
import Map from "@/components/map/index.vue";
// emit
const emits = defineEmits(["select"]);
//---打开对话框
const visible = ref(false);
// ----当前城市
const nowCity = ref();
// ---当前区域
const nowRegion = ref();
// ---关键词
const keyword = ref("");
// ---选择的中心点信息
const selectLocation = ref<number[]>([0, 0]);
// ---当前选择的点
const selectItem = ref();
// ----选择地区
const handleSelect = (item: any) => {
  selectLocation.value = getCenter(item.location);
  selectItem.value = item;
  map.value.setZoomAndCenter(16, selectLocation.value, true);
  // emits("select", item);

  // visible.value = false;
};

// ---远程搜索
let timeout: NodeJS.Timeout;
const querySearchAsync = async (queryString: string, cb: (arg: any) => void): Promise<any> => {
  if (queryString) {
    const result = (
      (
        await tips({
          q: queryString,
          city: nowCity.value.name,
          type: "120000|121000|120200|120202|120203|120300|120301|120302|120303|120304|070000",
          location: nowRegion.value.center
        })
      ).data as any
    ).filter((e: any) => typeof e.id === "string");
    queryString = "";
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      cb(result);
    }, 1200 * Math.random());
  }
};

// 初始化地图
const MapRef = ref<InstanceType<typeof Map> | null>();
const map = ref();
const amap = ref();

const open = async (city: any) => {
  console.log(city);
  nowCity.value = city[0];
  nowRegion.value = city[1];
  visible.value = true;
  if (map.value) {
    selectLocation.value = getCenter(nowRegion.value.center);
    map.value.setCenter(selectLocation.value, true);
  }
};

// 获取中心点
const getCenter = (center: string) => {
  return center.split(",").map((e: string) => parseFloat(e));
};

// 根据拖动地图获取中心点
const getLocation = (val: string) => {
  selectLocation.value = getCenter(val);
};

const getMap = (val: any) => {
  console.log(val);
  map.value = val.map;
  amap.value = val.amap;
  selectLocation.value = getCenter(nowRegion.value.center);
  // 设置中心点
  map.value.setCenter(selectLocation.value, true);
};

const confirm = () => {
  selectItem.value.location = selectLocation.value.join(",");
  emits("select", selectItem.value);
  visible.value = false;
};

defineExpose({
  open
});
</script>

<style></style>
